<template>
  <div id="home">
    <homeheader class="herader"></homeheader>
    <div class="wrap" ref="wrapper">
      <div class="wr">
        <swiper :swiperList="swiperList"></swiper>
          <icons :iconsUrl="iconsUrl"></icons>
          <position></position>
          <hot :hotUrl="hotUrl"></hot>
          <like :likeUrl="likeUrl"></like>
          <quna :qunaUrl="qunaUrl"></quna>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import homeheader from './components/header'
import swiper from './components/swiper'
import icons from './components/icons'
import position from './components/position'
import hot from './components/hot'
import like from './components/like'
import quna from './components/quna'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      lastCity: '',
      swiperList: [],
      hotUrl: [],
      iconsUrl: [],
      likeUrl: [],
      qunaUrl: []
    }
  },
  components: {
    homeheader,
    swiper,
    icons,
    position,
    hot,
    like,
    quna
  },
  computed: {
    ...mapState(['city'])
  },
  activated () {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getData()
    }
  },
  methods: {
    getData () {
      axios.get('/api/index.json?city=' + this.city).then(this.getDataSucc)
    },
    getDataSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.swiperList = data.swiperList
        this.hotUrl = data.hotUrl
        this.iconsUrl = data.iconsUrl
        this.likeUrl = data.likeUrl
        this.qunaUrl = data.qunaUrl
      }
    }
  },
  mounted () {
    this.lastCity = this.city
    this.getData()
    this.scroll = new Bscroll(this.$refs.wrapper)
  }
}
</script>

<style lang="stylus" scoped>
  .wrap
    position absolute
    top: 44px;left: 0;right: 0;bottom: 0;
    overflow hidden
</style>
